<template>
  <div>
<div class="permissMana">
  <el-input  placeholder="请输入角色名称" v-model="authority.permissionName"></el-input>
  <el-button type="primary" icon="el-icon-plus" @click="doAddPermission">添加角色</el-button>
</div>
    <div class="permissManaMain">
      <el-collapse accordion v-model="activeName"   @change="change">

        <el-collapse-item  :title="p.permissionName" :name="p.id" v-for="(p,index) in permission" :key="index">

          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>可访问资源</span>
              <el-button style="float: right; padding: 3px 0;color: red;font-size: 20px"
                         type="text"  icon="el-icon-delete"
                         @click="doDeletePermission(p)"
              ></el-button>
            </div>
            <div>
              <el-tree
                  :data="allMenus"
                  show-checkbox
                  ref="tree"
                  :key="index"
                  :default-checked-keys="selectedMenus"
                  node-key="id"
                  :props="defaultProps" ></el-tree>

              <div style="display: flex; justify-content: flex-end">
                <el-button size="mini" @click="cancelUpdate"
                >取消修改</el-button
                >
                <el-button
                    size="mini"
                    type="primary"
                    @click="doUpdate(p.id, index)"
                >确认修改</el-button
                >
              </div>
            </div>

          </el-card>
        </el-collapse-item>

      </el-collapse>
    </div>
  </div>
</template>

<script>
export default {
  name: "SystemAuthorityManagement",
  data() {
    return {
      selectedMenus:[],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      allMenus:[],
      authority:{
        id:'',
        permissionName:'',
      },
      permission:[],
      activeName:'-1',
    };
  },
  mounted() {
this.initPermission();
  },
  methods: {
    doDeletePermission(permission)
    {
      this.$confirm("删除[" + permission.permissionName + "]角色, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
          .then(() => {
            this.deleteRequest("/system/AuthorityManagement/delete?id="+permission.id).then((res) => {
              if (res) {
                this.initPermission();
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
    },
    doAddPermission()
    {
      if(this.authority.permissionName)
      {
        this.postRequest('/system/AuthorityManagement/add',this.authority).then(resp=>
        {
          if (resp)
          {
            this.initPermission();
            this.authority.permissionName='';

          }
        })
      }
      else
      {
        this.$message.error("请输入角色名称");
      }
    },
    cancelUpdate()
    {
      this.activeName=-1;
    },
    doUpdate(id,index)
    {
      let tree = this.$refs.tree[index];
      let selectedKeys = tree.getCheckedKeys(true);
  let changes=selectedKeys.toString().length;
      if (changes===0)
      {
        let url='/system/AuthorityManagement/updateMenuAuthority/?authorityId='+id+'&menuId=';
        this.putRequest(url).then((resp) => {
          if (resp) {
            this.initPermission();
            this.activeName = -1;
          }
        });
      }
      else
      {
        let url='/system/AuthorityManagement/updateMenuAuthority/?authorityId='+id;
        selectedKeys.forEach(key=>{
          url=url+'&menuId='+key;
        });
        this.putRequest(url).then((resp) => {
          if (resp) {
            this.initPermission();
            this.activeName = -1;
          }
        });
      }
      this.putRequest(url).then((resp) => {
        if (resp) {
          this.initPermission();
          this.activeName = -1;
        }
      });
    },
    change(id)
    {

      if(id)
      {
        this.initAllMenus();
        this.initSelectedMenus(id);
      }

    },
initSelectedMenus(id)
{

this.getRequest('/system/AuthorityManagement/menus/'+id).then(resp=>
{
  if(resp)
  {
    this.selectedMenus=resp;
  }
})
},
    initAllMenus() {
      this.getRequest('/system/AuthorityManagement/menus').then(resp=>{
        if(resp)
        {
          this.allMenus=resp;
        }
      })
    },

    initPermission()
    {
      this.getRequest('/system/AuthorityManagement/get').then(resp=>{
        if(resp)
        {
          this.permission=resp;
        }
      })
    }
  },
}
</script>

<style>
.permissMana {
  display: flex;
  justify-content: flex-start;
  align-content: center;


}
.permissMana .el-input {
  width: 300px;
  margin-right: 6px;
}
.permissManaMain {
  margin-top: 10px;
  width: 700px;
}
</style>